<!-- 普通页面页面的顶部组件 -->
<template>
  <header class="navHeader">
    <svg @click="goBackHandler" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
      <g>
      <path d="M9.476 16.257c-0.103-0.435 0.015-0.912 0.355-1.251l10.685-10.685c0.521-0.521 1.365-0.521 1.886 0s0.521 1.365 0 1.886l-9.745 9.745 9.746 9.746c0.521 0.521 0.521 1.365 0 1.886s-1.365 0.521-1.886 0l-10.685-10.685c-0.171-0.171-0.296-0.388-0.354-0.632l-0.002-0.009z" fill="rgba(255,255,255,1)"></path>
      </g>
    </svg>
    <div class="pageTitle">{{ pageTitle }}</div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goBackHandler = () => {
  router.back()
}

const props = defineProps({
  pageTitle: String
})
</script>

<style lang="scss" scoped>
  .navHeader {
    display: flex;
    height: 50px;
    background-color: rgb(24, 126, 255);
    align-items: center;
    position: sticky;
    top: 0px;
    z-index: 10;

    .pageTitle {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }
  }
</style>